<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-08 17:02:29
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\form\uiDate\uiDate.vue
 * CIMC-V2
-->
<template>
  <UiFormItem :class="{ hidden: conditionProperty.hidden || info.extension.hidden.value }" :info="info">
    <div :ref="info._id" v-ui-ref="vSetRef" class="w-full">
      <el-time-picker
        v-model="formDataModel"
        clearable
        :disabled="conditionProperty.disabled || info.extension.disabled.value"
        :end-placeholder="translateTitle('Ve.elements.结束时间')"
        format="HH:mm:ss"
        :is-range="info.extension.selection && info.extension.selection.value"
        :placeholder="info.extension.placeholder.value"
        range-separator="-"
        :size="info.extension.size.value"
        :start-placeholder="translateTitle('Ve.elements.开始时间')"
        value-format="HH:mm:ss"
        @change="handleChange"
      />
    </div>
  </UiFormItem>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import dayjs from 'dayjs'
  import trim from 'lodash/trim'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiTimePicker',
    components: {},
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return {}
    },
    computed: {},
    watch: {
      formDataModel(newVal, oldVal) {
        if (!newVal && Array.isArray(oldVal)) {
          // 如果为时间范围的清空 则需要将提取出来的值一并清空
          const formSelf = this.vuiComponents[this.formId] && this.vuiComponents[this.formId].self
          const fromData = formSelf && formSelf.info.data.formData
          if (fromData) {
            const startSuffix = this.info.extension?.startSuffix?.value ? this.info.extension?.startSuffix?.value : '_start'
            const endSuffix = this.info.extension?.endSuffix?.value ? this.info.extension?.endSuffix?.value : '_end'
            fromData[`${this.info.extension.model.value}${startSuffix}`] = ''
            fromData[`${this.info.extension.model.value}${endSuffix}`] = ''
          }
        }
      },
    },
    created() {
      // 设置默认值
      this.setDefaultTime()
    },
    mounted() {},
    methods: {
      translateTitle,
      handleChange() {
        // 触发条件判断值改变
        this.setPageModulesState('value', this.formDataModel)
        // 调用 change 事件
        this.onChange()
      },
      setDefaultTime() {
        // 设置默认时间
        if (this.info.extension.defaultTime && this.info.extension.defaultTime.value) {
          const timeReg = /^([0-1]?[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/
          const defaultTimeStr = this.info.extension.defaultTime.value
          // 如果是时间段
          if (this.info.extension.selection.value) {
            // 判断值格式是否正确
            if (defaultTimeStr.indexOf(',') === -1) return
            else {
              let defaultTimeList = defaultTimeStr.split(',')
              defaultTimeList[0] = trim(defaultTimeList[0])
              defaultTimeList[1] = trim(defaultTimeList[1])
              if (defaultTimeList[0] === '#CURRENT_TIME#' || defaultTimeList[1] === '#CURRENT_TIME#') {
                defaultTimeList.forEach((item, index) => {
                  if (item === '#CURRENT_TIME#') {
                    defaultTimeList[index] = dayjs().format('HH:mm:ss')
                  }
                })
              }
              if (timeReg.test(defaultTimeList[0]) && timeReg.test(defaultTimeList[1])) {
                this.formDataModel = defaultTimeList
              }
            }
          } else {
            if (defaultTimeStr === '#CURRENT_TIME#') {
              // 如果是获取当前时间
              this.formDataModel = dayjs().format('HH:mm:ss')
            } else {
              // 校验时间格式
              if (timeReg.test(defaultTimeStr)) {
                this.formDataModel = defaultTimeStr
              }
            }
          }
        }
      },
    },
  })
</script>
<style lang="scss" scoped>
  :deep() .el-input--prefix .el-input__inner {
    padding-left: 30px;
  }
</style>
